<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>秋蝉 - 工作使我快乐</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body,
        .framework {
            display: block;
            margin: 0;
            padding: 0;
            background: rgb(48, 48, 48);
            color: rgb(250, 250, 250);
            width: 100%;
            height: 100%;
            min-height: 100vh;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Source Han Sans, Microsoft YaHei, SimSun, sans-serif;
        }

        * {
            transition: all .25s ease-in;
        }

        main {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            padding: 8px;
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            -ms-flex-pack: center;
            align-items: center;
            justify-content: center;
        }

        .main-container {
            user-select: none;
            text-align: center;
            font-size: 48px;
            font-weight: 550;
            color: rgb(250, 250, 250);
            word-break: break-all;
        }

        .typer-input-area {
            padding-bottom: 3px;
            border-bottom: 2px solid rgb(250, 250, 250);
        }

        .typer-cursor {
            display: inline-block;
            position: relative;
            top: 6px;
            margin-left: 12px;
            width: 4px;
            height: 48px;
            background-color: rgb(250, 250, 250);
        }

        .framework[data-theme="light"] {
            color: rgb(48, 48, 48);
            background: #FFFFFF;
        }
        .framework[data-theme="light"] .main-container {
            color: rgb(48, 48, 48);
        }
        .framework[data-theme="light"] .typer-input-area {
            border-bottom: 2px solid rgb(48, 48, 48);
        }
        .framework[data-theme="light"] .typer-cursor {
            background-color:  rgb(48, 48, 48);
        }

        .framework[data-theme="blue1"] {
            color: #1049A9;
            background: #6A92D4;
        }
        .framework[data-theme="blue1"] .main-container {
            color: #1049A9;
        }
        .framework[data-theme="blue1"] .typer-input-area {
            border-bottom: 2px solid #1049A9;
        }
        .framework[data-theme="blue1"] .typer-cursor {
            background-color:  #1049A9;
        }

        .framework[data-theme="blue2"] {
            color: #f4ee58;
            background: #b5d4d6;
        }
        .framework[data-theme="blue2"] .main-container {
            color: #f4ee58;
        }
        .framework[data-theme="blue2"] .typer-input-area {
            border-bottom: 2px solid #f4ee58;
        }
        .framework[data-theme="blue2"] .typer-cursor {
            background-color:  #f4ee58;
        }

        .framework[data-theme="light2"] {
            color: #ffffff;
            background: #f3dadd;
        }
        .framework[data-theme="light2"] .main-container {
            color: #ffffff;
        }
        .framework[data-theme="light2"] .typer-input-area {
            border-bottom: 2px solid #ffffff;
        }
        .framework[data-theme="light2"] .typer-cursor {
            background-color:  #ffffff;
        }

        .framework[data-theme="linear1"] {
            color: #ffffff;
            background: linear-gradient(to top right, #a18cd1, #fbc2eb);
        }
        .framework[data-theme="linear1"] .main-container {
            color: #ffffff;
        }
        .framework[data-theme="linear1"] .typer-input-area {
            border-bottom: 2px solid #ffffff;
        }
        .framework[data-theme="linear1"] .typer-cursor {
            background-color:  #ffffff;
        }

        .blink {
            animation: blink 1s infinite steps(1, start);
        }

        @keyframes blink {
            0% {
                background-color: transparent;
            }

            50% {
                background-color: currentColor;
            }

            100% {
                background-color: transparent;
            }
        }

        #theme-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            outline: none;
            border: none;
            font-size: 28px;
            background-color: transparent;
            color: currentColor;
            z-index: 10;
        }

        #theme-btn svg {
            fill: currentColor;
        }

    </style>
</head>

<body>
    <div class="framework" data-theme="default">
        <main>
            <div class="main-container">
            </div>
        </main>
        <button id="theme-btn"><svg t="1609926580158" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2640" width="1em" height="1em"><path d="M788 159.831C756 128 746 128 724.38 128H642s-66 60.923-130 60.923S384 128 384 128h-84.795c-22.575 0-33.205 12.923-53.358 31.831L81.583 323.871c-11.34 11.325-29.583 47.821 0 84.784 0 0 142.44 131.643 156.417 132.883v293.539C238 868.452 286.579 896 320 896h386c33.42 0 82-27.548 82-60.923V541.538c14.145-1.152 154.449-132.883 154.449-132.883 31.551-36.655 23.402-73.771 0-97.142L788 159.831z" p-id="2641"></path></svg></button>
    </div>
    <script type="module" src="./src/index.js"></script>
</body>

</html>